"use client";
import { Create, useForm } from "@refinedev/antd";
import { useParsed } from "@refinedev/core";
import { Form, Input, Select } from "antd";
import { useEffect, useState } from "react";
import { selectRoleOptions } from "@common/api/role_action";

export default function UserCreate() {
  const { id } = useParsed();
  const { formProps, saveButtonProps } = useForm({
    resource: "system/user",
    id: id
  });

  const [roles,setRoles] = useState([]);
  useEffect(()=>{
    selectRoleOptions().then((res:any)=>{
      setRoles(res.data);
    })
  },[])
  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item name="user_name" label="用户名" rules={[{ required: true }]}> 
          <Input /> 
        </Form.Item>
        <Form.Item name="nick_name" label="昵称" rules={[{ required: true }]}> 
          <Input /> 
        </Form.Item>
        <Form.Item name="email" label="邮箱"> 
          <Input /> 
        </Form.Item>
        <Form.Item name="phonenumber" label="手机号"> 
          <Input /> 
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Select options={[
            { label: '男', value: '0' },
            { label: '女', value: '1' },
            { label: '未知', value: '2' },
          ]} />
        </Form.Item>
        <Form.Item name="status" label="状态">
          <Select options={[
            { label: '正常', value: '0' },
            { label: '停用', value: '1' },
          ]} />
        </Form.Item>
        <Form.Item name="password" label="密码" rules={[{ required: true }]}> 
          <Input.Password /> 
        </Form.Item>
        <Form.Item name="remark" label="备注"> 
          <Input.TextArea rows={2} /> 
        </Form.Item>
        <Form.Item name="role_ids" label="分配角色">
          <Select
            mode="multiple"
            options={roles}
            placeholder="请选择角色"
          />
        </Form.Item>
      </Form>
    </Create>
  );
} 